<template>
  <section>
    <div class="type">
      <img :src="INDEXIMGBASE64.ZHOUSHU2X" class="pink">
      <span class="title">周数</span>
      <div class="content">
        <div v-for="item in zhoushu" :class="{'round_ed': item.pass, 'round_ing': item.now, 'round_future': item.future}">
          <span>{{item.weeks}}</span>
        </div>
        <div class="clear"></div>
      </div>
    </div>

    <div class="manage">
      <img :src="INDEXIMGBASE64.BANJIMINGDAN2X" class="pink">
      <span class="title">班级名单</span>
      <!-- <div class="rightBtn">
        <a :href="`${this._httpUrl}common/upload?fileName=${this.fileName}`">
          <el-button type="primary" size="small">下载模板</el-button>
        </a>
        <el-button type="primary" size="small" @click="uploadshow">导入</el-button>
        <el-button type="success" size="small" @click="newshow">新增</el-button>
      </div> -->
      <div class="content">
        <div class="unit" v-for="item in nameList" :class="{'unit_ed': item.pass, 'unit_ing': item.now, 'unit_future': item.future}">
          <span>{{item.name}}</span>
          <i class="el-icon-circle-check" v-show="item.iconShow"></i>
        </div>
        <div class="clear"></div>
      </div>
      <!-- <el-pagination
        v-show="paging"
        @current-change="handleCurrentChange"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="total"
        class="pull-right">
      </el-pagination> -->
    </div>

    <!-- <div class="up" v-show="newShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="img">
      <span class="title">新增</span>
      <el-button icon="close" class="close" @click="newshow"></el-button>
      <header>
        <span class="header-title">基本信息</span>
      </header>
      <el-form ref="form" :model="newAddForm" label-width="100px">
        <el-form-item label="模板内容:">
          <textarea v-model="newAddForm.templateContent" :rows="10" :cols="35"></textarea>
        </el-form-item>
      </el-form>
      <div class="bottom">
        <div class="right">
          <el-button type="success" @click="keepNewData()">确定</el-button>
        </div>
      </div>
    </div> -->

    <!-- <div class="details" v-show="xiugaiShow">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">修改</span>
      <el-button icon="close" class="close" @click="closeXiugaishow()"></el-button>
      <div class="kong"></div>
      <el-form ref="form" :model="xiugaiForm" label-width="140px">
        <el-form-item label="模板内容:">
          <textarea v-model="xiugaiForm.templateContent" :rows="10" :cols="35"></textarea>
        </el-form-item>
        <el-form-item label="状态:">
          <el-radio-group v-model="xiugaiForm.isValid" size="small">
            <el-radio-button label="启用"></el-radio-button>
            <el-radio-button label="禁用"></el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="button">
        <el-button type="success" @click="changeData()">确定</el-button>
      </div>
    </div> -->

    <!-- <div class="upload" v-show="upload">
      <el-button icon="close" class="close" @click="uploadshow()"></el-button>
      <div class="uploadButton">
        <el-upload
          class="upload-demo"
          ref="upload"
          name="files"
          :action="`${this._httpUrl}comment/manage/weekTemplate/import`"
          :headers= "this.xtoken"
          :auto-upload="false"
          :on-success="resData"
          :on-change="getFileName"
          :data="importObj"
          :on-remove="changeStatus">
          <el-button slot="trigger" type="primary" :disabled="selectFile" size="small">选取文件</el-button>
          <el-button style="margin-left: 10px;" type="success" @click="submitUpload" size="small">上传到服务器</el-button>
        </el-upload>
      </div>
      <div class="err" ref="err">
        <span class="error">{{errWord}}</span>
      </div>
    </div> -->

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="anShow"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      zhoushu: [{
        weeks: '第一周',
        status: 'pass'
      },
      {
        weeks: '第二周',
        status: 'pass'
      },
      {
        weeks: '第三周',
        status: 'now'
      },
      {
        weeks: '第四周',
        status: 'future'
      },
      {
        weeks: '第五周',
        status: 'future'
      }],
      nameList: [{
        name: '欧阳俊逸',
        status: 1
      },
      {
        name: '欧阳俊逸',
        status: 2
      },
      {
        name: '欧阳俊逸',
        status: 1
      },
      {
        name: '欧阳俊逸',
        status: 2
      },
      {
        name: '欧阳俊逸',
        status: 3
      },
      {
        name: '欧阳俊逸',
        status: 3
      },
      {
        name: '欧阳俊逸',
        status: 1
      },
      {
        name: '欧阳俊逸',
        status: 2
      },
      {
        name: '欧阳俊逸',
        status: 3
      },
      {
        name: '欧阳俊逸',
        status: 2
      }],
      selectFile: false,
      fileName: '评价模板.xls',
      haha: 'comment_template_type',
      dictDataKey: null,
      typeArray: [],
      errWord: null,
      tablemsg: [],
      xtoken: null,
      anShow: false,
      newShow: false,
      upload: false,
      exportUrl: null,
      xiugaiShow: false,
      xiugaiForm: {
        id: null,
        templateContent: null,
        isValid: null
      },
      newAddForm: {
        templateContent: null
      },
      importObj: {
        files: null,
        dictDataKey: null
      }
    }
  },
  mounted () {
    for (var i = 0; i < this.zhoushu.length; i++) {
      if (this.zhoushu[i].status === 'pass') {
        this.$set(this.zhoushu[i], 'pass', true)
        this.$set(this.zhoushu[i], 'now', false)
        this.$set(this.zhoushu[i], 'future', false)
      } else if (this.zhoushu[i].status === 'now') {
        this.$set(this.zhoushu[i], 'pass', false)
        this.$set(this.zhoushu[i], 'now', true)
        this.$set(this.zhoushu[i], 'future', false)
      } else {
        this.$set(this.zhoushu[i], 'pass', false)
        this.$set(this.zhoushu[i], 'now', false)
        this.$set(this.zhoushu[i], 'future', true)
      }
    }
    for (var j = 0; j < this.nameList.length; j++) {
      if (this.nameList[j].status === 1) {
        this.$set(this.nameList[j], 'pass', true)
        this.$set(this.nameList[j], 'now', false)
        this.$set(this.nameList[j], 'future', false)
        this.$set(this.nameList[j], 'iconShow', true)
      } else if (this.nameList[j].status === 2) {
        this.$set(this.nameList[j], 'pass', false)
        this.$set(this.nameList[j], 'now', true)
        this.$set(this.nameList[j], 'future', false)
        this.$set(this.nameList[j], 'iconShow', false)
      } else {
        this.$set(this.nameList[j], 'pass', false)
        this.$set(this.nameList[j], 'now', false)
        this.$set(this.nameList[j], 'future', true)
        this.$set(this.nameList[j], 'iconShow', false)
      }
    }
    console.log(this.nameList)
    this.getLeftData()
    this.exportUrl = this._exportUrl()
    this.xtoken = {'yxt-xtoken': this.exportUrl}
  },
  methods: {
    // _exportUrl () {
    //   let _cookie = document.cookie.split(';')
    //   let _cookieArray = []
    //   _cookie.forEach(v => {
    //     let _d = v.split('=')
    //     _cookieArray.push({
    //       key: _d[0],
    //       value: _d[1]
    //     })
    //   })
    //   return _cookieArray[0].value
    // },
    getLeftData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'comment/manage/weekTemplate/dictData/list', {dictCode: this.haha}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.typeArray = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    changeTime (value) {
      if (value != null) {
        var date = new Date(value)
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
      } else {
        return ''
      }
    },
    getDictDataKey (item) {
      this.dictDataKey = item.dictDataKey
      this.getRightData()
    },
    getRightData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'comment/manage/weekTemplate/page', {dictDataKey: this.dictDataKey}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tablemsg = response.data.data.results
          for (var i = 0; i < this.tablemsg.length; i++) {
            this.tablemsg[i].createTime2 = this.changeTime(this.tablemsg[i].createTime)
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    newshow () {
      this.newShow = !this.newShow
      this.anShow = !this.anShow
    },
    keepNewData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'comment/manage/weekTemplate/add', {dictDataKey: this.dictDataKey, templateContent: this.newAddForm.templateContent}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getRightData()
          this.newAddForm.templateContent = null
          this.newShow = !this.newShow
          this.anShow = !this.anShow
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    xiugaishow (scope) {
      this.xiugaiForm.id = scope.row.id
      this.xiugaiForm.templateContent = scope.row.templateContent
      this.xiugaiForm.isValid = scope.row.isValid
      this.xiugaiShow = !this.xiugaiShow
      this.anShow = !this.anShow
    },
    closeXiugaishow () {
      this.xiugaiShow = !this.xiugaiShow
      this.anShow = !this.anShow
    },
    changeData () {
      if (this.xiugaiForm.isValid === '启用') {
        this.xiugaiForm.isValid = 1
      } else {
        this.xiugaiForm.isValid = 0
      }
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'comment/manage/weekTemplate/update', {id: this.xiugaiForm.id, templateContent: this.xiugaiForm.templateContent, isValid: this.xiugaiForm.isValid}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getRightData()
          this.xiugaiShow = !this.xiugaiShow
          this.anShow = !this.anShow
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    uploadshow () {
      this.upload = !this.upload
      this.anShow = !this.anShow
      if (this.$refs.upload.uploadFiles.length > 0) {
        this.$refs.upload.uploadFiles = []
        this.selectFile = false
        this.errWord = null
      }
    },
    submitUpload () {
      this.$refs.upload.submit()
      this.getRightData()
      // console.log(this.$refs.upload.uploadFiles[0].response)
    },
    resData (response, file, fileList) {
      // console.log(response)
      this.errWord = response.msg
    },
    getFileName (file) {
      this.importObj.files = file.name
      this.importObj.dictDataKey = this.dictDataKey
      console.log(this.$refs.upload)
      if (this.$refs.upload.uploadFiles.length > 0) {
        this.selectFile = true
      }
    },
    changeStatus () {
      this.selectFile = false
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
textarea{
  margin-top: 11px;
  resize: none;
}
.textarea{
  resize : none; 
}
.error{
  color: #FA5555;
}
.text{
  border: 0;
  border-bottom: 1px solid #d7d7d7;
}
.type{
  width: 34%;
  position: relative;
  float: left;
  background: #FFF;
  margin-left: 2%;
  margin-top: 50px;
  border-radius: 5px;
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  .content{
    width: 70%;
    margin-left: 15%;
    .round_ed{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: green;
      color: #fff;
      float: left;
      margin-left: 10%;
      text-align: center;
      line-height: 60px;
      font-size: 14px;
      margin-top: 20px;
      cursor: pointer;
    }
    .round_ing{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: yellow;
      color: #fff;
      float: left;
      margin-left: 10%;
      text-align: center;
      line-height: 60px;
      font-size: 14px;
      margin-top: 20px;
      cursor: pointer;
    }
    .round_future{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #B4BCCC;
      color: #000;
      float: left;
      margin-left: 10%;
      text-align: center;
      line-height: 60px;
      font-size: 14px;
      margin-top: 20px;
      cursor: pointer;
    }
    .clear{
      clear: both;
    }
  }
}
.manage{
  width: 60%;
  position: relative;
  float: left;
  background: #FFF;
  margin-left: 2%;
  margin-top: 50px;
  border-radius: 5px;
  padding-top: 20px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  .content{
    width: 80%;
    margin-left: 10%;
    .unit_ed{
      width: 14%;
      height: 30px;
      border-radius: 10px;
      margin: 10px 3%;
      float: left;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      background: #409EFF;
      color: #fff;
      margin-top: 20px;
      position: relative;
      cursor: pointer;
    }
    .unit_ing{
      width: 14%;
      height: 30px;
      border-radius: 10px;
      margin: 10px 3%;
      float: left;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      background: #409EFF;
      color: #fff;
      margin-top: 20px;
      position: relative;
      cursor: pointer;
    }
    .unit_future{
      width: 14%;
      height: 30px;
      border-radius: 10px;
      margin: 20px 3% 10px 3%;
      float: left;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      background: #B4BCCC;
      color: #000;
      position: relative;
      cursor: pointer;
    }
    .clear{
      clear: both;
    }
  }
}
.el-icon-circle-check{
  position: absolute;
  right: -6px;
  top: -10px;
  color: #FA5555;
}
.pink{
  position: absolute;
  left: 24px;
  top: -25px;
}
.title{
  margin-left: 116px;
}
.upload{
  width: 20%;
  position: fixed;
  left: 50%;
  top: 200px;
  margin-left: -10%;
  background: #FFF;
  border-radius: 5px;
  z-index: 99999;
  padding: 10px 10px 10px 10px;
  text-align: center;
  .uploadButton{
    margin-top: 40px;
  }
}
.details{
  width: 35%;
  position: fixed;
  left: 50%;
  top: 60px;
  margin-left: -18%;
  background: #FFF;
  border-radius: 5px;
  z-index: 99999;
  padding: 20px 10px 10px 10px;
  .button{
    text-align: center;
  }
  .text{
    border: 0;
    border-bottom: 1px solid #d7d7d7;
  }
}
</style>

<style scoped>
  .choose{
    margin-left: 12%;
  }
  .secondLine{
    width: 55%;
    float: left;
  }
  .clear{
    clear: both;
  }
  .secondLine .filter-tree{
    margin-left: 15.6%;
    width: 50%; height: 40%;
    overflow: auto;
  }
  .rightBtn{
    position: absolute; right: 2%; top: 20px;
  }
  div[data-v-22bf8d34] ul
  {
    /*position: relative;
    left: 12%;*/
  }
  div[data-v-22bf8d34]
  {
    padding-bottom: 10px;
  }
  .el-upload--picture-card
  {
    width: 80px; height: 80px;
  }
  .el-upload--picture-card i
  {
    position: relative; top: -28px;
  }
  .tree{
    position: relative; left: 60%;
    width: 40%;
  }
  .span{
    opacity: 0;
  }

  .up{
    width: 35%;
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -18%;
    background: #FFF;
    padding: 20px 20px 0 20px;
    border-radius: 5px;
    z-index: 99999;
  }
  .up .img{
    position: absolute;
    left: 24px;
    top: -20px;
  }
  .up .title{
    margin-left: 90px;
  }
  .up header{
    height: 24px;
    border-bottom: 2px solid #D7D7D7;
    padding: 30px 0 10px 0;
    margin-left: 1%;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .up .header-title{
    height: 24px;
    display: inline-block;
    color: #FB7862;
    border-bottom: 2px solid #FB7862;
    padding: 0 10px 10px 10px;
    margin-left: 0;
  }
  .up .form{
    margin-left: 10%;
    margin-right: 10px;
  }
  .up .form .firstLine{
    padding: 30px 0 10px 0;
  }
  .up .form .secondLine{
    padding: 30px 0 10px 0;
  }
  .up .form .form-longText{
    width: 50%;
    border: 0;
    border-bottom: 1px solid #D7D7D7;
  }
  .up .form .form-text{
    width: 70%;
    border: 0;
    border-bottom: 1px solid #D7D7D7;
  }
  .up ul{
    margin-top: 30px;
    margin-left: 75px;
  }
  .up ul li{
    float: left;
  }
  .up .bottom{
    border-top: 1px solid #D7D7D7;
    margin-top: 20px;
    background: #F8F8F8;
    padding: 8px 0;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0 0 5px 5px;
  }
  .up .bottom .right{
    text-align: right;
    padding: 0 10px 0 0;
  }
</style>
